<template>
  <div class="app-container">
    <el-form :rules="rules" ref="ruleForm" :model="form" label-width="110px">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" >
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>人脸灯光模式</span>
              <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
            </div>
            <div  class="text item">

                <el-form-item label="人脸灯光模式">
                  <el-radio-group @change="faceChange" v-model="form.faceLightMode">
                    <el-radio :label="0">手动</el-radio>
                    <el-radio :label="1">自动</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="使能" v-show="form.faceLightMode==0">
                  <el-radio-group v-model="form.faceLightValue">
                    <el-radio :label="0">关闭</el-radio>
                    <el-radio :label="1">打开</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="光照强度值" prop="faceLightValue" v-show="form.faceLightMode==1">
                  <el-col>
                    <el-tooltip class="item" effect="dark" content="0 ~ 60000" placement="top-start">
                      <el-input class="trailLightMode" clearable v-model="form.faceLightValue"></el-input>
                    </el-tooltip>
                  </el-col>

                </el-form-item>


            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" >
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>防尾随灯光</span>
              <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
            </div>
            <div  class="text item">
              <div class="block">
                <span class="demonstration" style="line-height: 44px;">pwm值(0~100)</span>
                <el-slider v-model="form.trailLightValue" show-input></el-slider>
              </div>
              <!--<el-form-item label="人脸灯光模式">-->
                <!--<el-radio-group @change="trailChange" v-model="form.trailLightMode">-->
                  <!--<el-radio :label="0">手动</el-radio>-->
                  <!--<el-radio :label="1">自动</el-radio>-->
                <!--</el-radio-group>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="使能" v-show="form.trailLightMode==0">-->
                <!--<el-radio-group v-model="form.trailLightValue">-->
                  <!--<el-radio :label="0">关闭</el-radio>-->
                  <!--<el-radio :label="1">打开</el-radio>-->
                <!--</el-radio-group>-->
              <!--</el-form-item>-->
              <!--<el-form-item label="光照强度值" prop="trailLightValue" v-show="form.trailLightMode==1">-->
                <!--<el-col>-->
                  <!--<el-tooltip class="item" effect="dark" content="0 ~ 60000" placement="top-start">-->
                    <!--<el-input class="trailLightMode" clearable v-model="form.trailLightValue"></el-input>-->
                  <!--</el-tooltip>-->
                <!--</el-col>-->

              <!--</el-form-item>-->
            </div>
          </el-card>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="setLightContorlParam">保存</el-button>
        </el-col>
      </el-row>

    </el-form>

  </div>

</template>

<script>
    export default {
        name: "lightingControl",
      data:function () {
          var validateLightValue=function (rule, value, callback) {
            var regExp=/^[0-9]{1,5}$/
            if(value===''){
              callback(new Error('不能为空'))
            }else if(value<0||value>60000){
              callback(new Error('只能输入 0 ~ 60000 之间的整数'))
            }else if(!regExp.test(value)){
              callback(new Error('只能输入数字'))
            }else{
              callback()
            }
          }
        return{
          form:{
            faceLightMode:0,
            faceLightValue:0,
            trailLightMode:0,
            trailLightValue:0
          },
          rules:{
            faceLightValue:[
              {validator:validateLightValue, trigger: 'blur'}
            ],
            trailLightValue:[
              {validator:validateLightValue, trigger: 'blur'}
            ]
          }
        }
      },
      methods:{
        getLightContorlParam :function () {
          var _this=this
          _this.loading=true
          _this.postAjax({
            method:'getLightContorlParam',
            params:{}
          }).then(function (res) {
            console.log(res);
            if(res.result==0){
              var data=res.params
              _this.form.faceLightMode=data.faceLightMode
              _this.form.faceLightValue=data.faceLightValue
              _this.form.trailLightMode=data.TrailLightMode
              _this.form.trailLightValue=data.TrailLightValue
            }else {
              _this.tips(res.errorInfo.detail,'error')
            }
          }).catch(function (err) {
            console.log(err);
          }).finally(function (fn) {
            _this.loading=false
            console.log(fn);
          })
        },
        trailChange:function(){
          this.form.trailLightValue=0
          this.clearValidateError()
        },
        faceChange:function (value) {
          console.log(value);
          this.form.faceLightValue=0
          this.clearValidateError()
        },
        clearValidateError:function(){
          this.$refs['ruleForm'].clearValidate()
        },
        setLightContorlParam:function () {
          var _this=this
          this.$refs['ruleForm'].validate(function (valid) {
            if(valid){
              _this.loading=true
              _this.postAjax({
                method:'setLightContorlParam',
                params:{
                  faceLightMode:_this.form.faceLightMode,
                  faceLightValue:_this.form.faceLightValue*1,
                  TrailLightMode:_this.form.trailLightMode,
                  TrailLightValue:_this.form.trailLightValue*1
                }
              }).then(function (res) {
                console.log(res);
                if(res.result==0){
                  // debugger
                  _this.tips('保存成功','success')
                  // var data=res.params
                  // // debugger
                  // _this.form.ip=data.ip
                  // _this.form.gateway=data.gateway
                  // _this.form.mask=data.mask
                  // _this.form.dns1=data.dns1
                  // _this.form.dns2=data.dns2
                }else {
                  _this.tips(res.errorInfo.detail,'error')
                }
              }).catch(function (err) {
                console.log(err);
              }).finally(function (fn) {
                _this.loading=false
                console.log(fn);
              })
            }else{
              return false
            }
          })


        }
      },mounted:function () {
        this.getLightContorlParam()
      }
    }
</script>

<style scoped>
  .el-form-item {
    /*margin-bottom: 0;*/
  }
  .box-card{
    height: 220px;
  }
  .trailLightMode{
    width: 120px
  }
  .el-col{
    margin-bottom: 20px;
  }
</style>
